<template>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
        <van-tabbar-item name="home" icon="home-o" replace to="/">首页</van-tabbar-item>
        <van-tabbar-item name="sort" icon="qr" replace to="/sort">分类</van-tabbar-item>
        <van-tabbar-item name="cart" icon="shopping-cart-o" replace to="/cart" :badge="number">购物车</van-tabbar-item>
        <van-tabbar-item name="user" icon="contact" replace to="/user">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return{
      active:'home'
    };
  },
  computed:{
    ...mapState(['cartNumber']),
    number() {
      if(this.cartNumber == 0) {
        return '';
      }else if(this.cartNumber>99) {
        return 99;
      }else{
        return this.cartNumber;
      }
    }
  },
  watch:{
    $route(to) {
      this.changeAction(to.path);
    }
  },
  activated() {
    this.changeAction(this.$route.path);
  },
  created() {
    this.changeAction(this.$route.path);
  },
  methods:{
    changeAction(path) {
      switch(path) {
        case '/':
          this.active = 'home';
          break;
        case "/sort":
          this.active = 'sort';
          break;
        case "/cart":
          this.active = 'cart';
          break;
        case "/user":
          this.active = 'user';
          break;
      }
    }
  }
};
</script>